import {
    Component,
    onMounted,
    onWillStart,
    reactive,
    useChildSubEnv,
    useEffect,
    useRef,
    useState,
    useSubEnv,
    xml
} from "@odoo/owl";
import {makeEnv, mountComponent, startServices} from "@web/env";
import './style.scss'
import {registry} from "@web/core/registry";


import {
    useAutofocus,
    useBus,
    useChildRef,
    useForwardRefToParent,
    useService,
    useSpellCheck,
} from "@web/core/utils/hooks";
import {CheckBox} from "@web/core/checkbox/checkbox";

import {AccordionItem} from "@web/core/dropdown/accordion_item";
import {DateTimeInput} from "@web/core/datetime/datetime_input";
import {Dropdown} from "@web/core/dropdown/dropdown";
import {CheckboxItem} from "@web/core/dropdown/checkbox_item";
import {DropdownItem} from "@web/core/dropdown/dropdown_item";

import {ExpressionEditorDialog} from "@web/core/expression_editor_dialog/expression_editor_dialog";


import {CodeEditor} from "@web/core/code_editor/code_editor";

import {DomainSelector} from "@web/core/domain_selector/domain_selector";
import {DomainSelectorDialog} from "@web/core/domain_selector_dialog/domain_selector_dialog";
import {Popover} from "@web/core/popover/popover";
import {RecordSelector} from "@web/core/record_selectors/record_selector";
import {MultiRecordSelector} from "@web/core/record_selectors/multi_record_selector";
import {SelectMenu} from "@web/core/select_menu/select_menu";
import {LoadingIndicator} from "@web/webclient/loading_indicator/loading_indicator";

import {NavBar} from "@web/webclient/navbar/navbar";


import {SearchBarMenu} from "@web/search/search_bar_menu/search_bar_menu";

import {WithSearch} from "@web/search/with_search/with_search";

import {localization} from "@web/core/l10n/localization";

import {getDefaultConfig, View} from "@web/views/view";
import {makeView} from "@web/components/help";


const userMenuRegistry = registry.category("user_menuitems");


export class Demo extends Component {
    setup() {

        this.popover = useService('popover')
        this.orm = useService('orm')
        this.localization = useService('localization')
        this.ui = useService('ui')
        this.field = useService('field')
        this.hotkey = useService('hotkey')
        this.notification = useService('notification')
        this.rpc = useService('rpc')
        this.menu = useService('menu')
        this.views = useService('view')
        this.fieldService = useService("field");

        this.state = useState({show: true})

        this.rootRef = useRef('root')
        const rootRef = useRef("root");
        const btnRef = useRef("btn");
        const inputRef = useRef("inputRef");


        useEffect(() => {
            console.log('kongkong')

        }, () => [])

        useEffect((el) => {
            console.log('inputRef.elinputRef.el', el)

        }, () => [inputRef.el])


        onWillStart(async () => {
            // await this.orm.fieldg
            const fields = await this.fieldService.loadFields("sale.order");

            const {props, viewEnv} = makeView({
                type: "form",
                resModel: "sale.order",
                resId: 37,
                viewId: 891,
                searchViewId: 893,
                fields,

                arch: `
                <form>
                    <sheet>
                        <group>
                            <field name="prepayment_percent" placeholder="hellowrld" />
                            <field name="id" />
                            <field name="name" widget="statinfo" options="{'label_field':'create_date',}" />
                            <field name="note" widget="html"  />
                            <field name="user_id" />
                            <field name="company_id" />
                            <field name="create_date" />
                        </group>
                    </sheet>
                </form>`,
            })
            this.viewProps = props

        })


        this.onClick = async () => {
            console.log('xwwwxxwwx')
            console.log('onclick')
            console.log('onclick')

            console.log('qqqq')

        }

    }

    /**
     * this isa
     *
     * @param a{number}
     * @param b{number}
     * @param c{number}
     * @returns {number}
     */
    spam(a, b, c) {
        return a + b + c
    }
}


Demo.template = "Demo";
Demo.props = ['*']
Demo.components = {

    View,
    CheckBox,
    WithSearch,
    SearchBarMenu,
    LoadingIndicator,
    NavBar,
    SelectMenu,
    MultiRecordSelector,
    RecordSelector,
    Popover,
    DomainSelectorDialog,
    DomainSelector,
    CodeEditor,
    ExpressionEditorDialog,
    Dropdown,
    DropdownItem,
    AccordionItem,
    CheckboxItem,
    DateTimeInput
};

